<template>
  <div class="partner">
    <div class="centered">
        <div class="partner-header">
            <span class="left"></span>
            <h3>合作伙伴</h3>
            <p>PARTNERS</p>
            <span class="right"></span> 
        </div>
        <div class="car-logo">
            <ul>
                <li v-for="(imgs, index) in images" :key="index">
                    <div>
                      <img :src="imgs.cover">
                    </div>
                    <p>{{imgs.name}}</p>
                </li>
            </ul>
        </div>
    </div>
  </div>
</template>
<script>
export default {
  name: 'Parener',
  data(){
      return{
        images:[]
      }
  },
  created(){
    var node = this;
    window.$.get(this.apiUrl + '/ads',{
        type:'4s'
    }, function(res){
        node.images = res.data;
    })
  }
}
</script>
<style scoped>
body,
div,
dl,
dt,
dd,
ul,
ol,
li,
h1,
h2,
h3,
h4,
h5,
h6,
pre,
code,
form,
fieldset,
legend,
input,
button,
textarea,
p,
blockquote,
th,
td {
  overflow: hidden;
}
.partner{
    width: 100%;
    height: auto;
    margin-top: 150px;
    margin-bottom: 100px;
}
.partner .centered{
    width: 1200px;
    height: auto;
    margin: 0 auto;
}
.partner .centered .partner-header{
    width: 100%;
    height: 61px;
    text-align: center;
    position: relative;
}
.partner .centered .partner-header h3{
  width: 218px;
  height: 45px;
  font-size: 36px;
  color: #110567;
  line-height: 30px;
  display: inline-block;
}
.partner .centered .partner-header p{
  width: 194px;
  height: 18px;
  font-size: 18px;
  line-height: 16px;
  color: #000;
  position: absolute;
  left: 510px;
  top: 46px;
}
.partner .centered .partner-header .left{
  width: 290px;
  border-top: solid 3px #009ae9;
  position: absolute;
  left: 160px;
  top: 18px;
}
.partner .centered .partner-header .right{
  width: 290px;
  border-top: 3px solid #009ae9;
  position: absolute;
  right: 161px;
  top: 18px;
}
.partner .centered .car-logo{
  width: 1200px;
  height: auto; 
  margin-top: 60px; 
}
.partner .centered .car-logo ul{
  width: 1200px;
  height: auto;
}
.partner .centered .car-logo ul li{
  width: 112px;
  height: 138px; 
  margin-left: 103px; 
  float: left;
  text-align: center;
}
.partner .centered .car-logo ul li:nth-child(1),
.partner .centered .car-logo ul li:nth-child(7),
.partner .centered .car-logo ul li:nth-child(13),
.partner .centered .car-logo ul li:nth-child(19){
  margin-left: 0;  
}
.partner .centered .car-logo ul li div{
  width: 100px;
  height: 100px;
  margin: 0 auto;
}
.partner .centered .car-logo ul li div img{
  width: 100%;
  height: auto;
}
</style>
